<!--
 * @Description: 快递弹窗
 * @Author: py
 * @Date: 2024-08-08
-->
<script setup lang='ts' name='delivery-dialog'>
import type { FieldValues } from 'plus-pro-components'

import { CopyDocument } from '@element-plus/icons-vue'

const props = withDefaults(defineProps<{
    data?: any
}>(), {
    data: {},
})

const visible = defineModel<boolean>('visible', { required: true })
// const id = defineModel<string>('id', { required: true })
const { data } = toRefs(props)

const initialState = {}
const formValues = ref<FieldValues>({ ...initialState })

const isFormLoading = ref(false)

watchEffect(() => {
    if (data.value) {
        formValues.value = { ...data.value }
    }
})

const activities = [
    {
        desciption: '商品已下单',
        orderStatus: '已下单',
        timestamp: '2024-04-11 10:23:00',
    },
    {
        desciption: '等待揽收中',
        orderStatus: '已发货',
        timestamp: '2024-04-11 11:19:00',
    },
    {
        desciption: '顺丰快递已揽收快件',
        orderStatus: '已揽件',
        timestamp: '2024-04-12 09:19:00',
    },
    {
        desciption: '快件已在【武汉市江汉区】完成分拣，准备发出',
        orderStatus: '',
        timestamp: '2024-04-12 09:19:00',
    },
    {
        desciption: '快件到达【武汉物流中心】',
        orderStatus: '',
        timestamp: '2024-04-12 09:19:00',
    },
    {
        desciption: '快件派送中，请耐心等待，保持电话畅通，准备签收',
        orderStatus: '派送中',
        timestamp: '2024-04-13 14:07:06',
    },
    {
        desciption: '[自提柜]您的快件已存放至绿地中心丰巢【自提柜，请及时取件。',
        orderStatus: '待取件',
        timestamp: '2024-04-13 16:10:00',
    },
    {
        desciption: '[自提柜]已签收，签收人凭取货码签收。感谢使用顺丰快递及丰巢【自提柜】，期待再次为您服务',
        orderStatus: '已签收',
        timestamp: '2024-04-13 17:15:23',
    },
]

function doCopy(passTxt: any) {
    navigator.clipboard.writeText(passTxt).then(() => {
        ElMessage.success('复制成功')
    }).catch((err) => {
        // 复制失败
        console.error('复制失败', err)
    })
}
</script>

<template>
    <PlusDialog v-model="visible"
                width="500"
                title="物流信息"
                :has-footer="false"
                close-on-press-escape
    >
        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <template v-else>
            <div class="mb-15 flex">
                <div>
                    快递单号：
                </div>

                <div>
                    <span class="vertical-middle">{{ formValues.orderNo }}</span>

                    <el-icon v-if="formValues.orderNo"
                             class="ml-10 cursor-pointer vertical-middle"
                             @click="doCopy(formValues.orderNo)"
                    >
                        <CopyDocument />
                    </el-icon>
                </div>
            </div>

            <el-scrollbar max-height="400px">
                <el-timeline class="pl-2">
                    <el-timeline-item v-for="(activity, index) in activities"
                                      :key="index"
                                      :timestamp="activity.timestamp"
                                      placement="top"
                                      type="primary"
                                      hollow
                    >
                        <div v-if="activity.orderStatus"
                             class="fw-600"
                        >
                            {{ activity.orderStatus }}
                        </div>

                        <div class="text-13 text-#909399">
                            {{ activity.desciption }}
                        </div>
                    </el-timeline-item>
                </el-timeline>
            </el-scrollbar>
        </template>
    </PlusDialog>
</template>

<style lang="less" scoped></style>
